<template>
  
  <!-- action里接口报错无法增加到文件列 -->
  <!-- action="https://localhost:8090/systemFile/fileUpload2"  -->
  <!-- auto-upload="true"时，每次都上传服务器 -->
  <!-- auto-upload="false"可以来实现批量上传 -->
 <el-upload
    v-model:file-list="fileList"
    name="files"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-change="onChangeFun"
    :auto-upload="false"
     >
    <el-button type="primary">点击选择文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png 文件大小不能超过 500KB.
      </div>
    </template>
  </el-upload>

</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 变量或者函数就加括号
import  { uploadFiles } from '@/apis/fileUpload'

const maxNums=3;

/**
 * 文件列表
 */
const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

/**
 * 用户添加文件后，又不想上传，移除，这时要弹框，提示他是否真的要删除
 */
 const beforeRemove= (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `确定要移除文件 ${uploadFile.name} 吗?`
  ).then(
    () => true,
    () => false
  )
}

/**
 * 移除文件回调
 * @param file 移除的文件
 * @param uploadFiles 移除后的文件列表
 */
const handleRemove=(file, uploadFiles) => {
  console.log("移除文件"+file.name+"url:"+file.url);
  
}
/**
 * 添加文件后的回调
 */
const onChangeFun = (file, uploadFiles) => {
  // 判断上传文件是否已存在
  let existFile = uploadFiles
      //slice返回[0, list.length - 1)的一个新数组
      .slice(0, uploadFiles.length - 1)
      .find((f) => f.name === file.name);
  if (existFile) {
    ElMessage.error(`前文件${file.name}已经存在!`);
    uploadFiles.pop();
  }
};

//点击文件列表中已上传的文件时的钩子
const handlePreview = (uploadFile) => {
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `一次最多只能上传 ${maxNums}个文件`
  )
}




const upload = ref();
// 上传文件
const uploadFilesMethod = async () => {
  const res = await uploadFiles()

}
const submitUpload = () => {
  if (fileList.value.length <= 0) {
    ElMessage.warning("请上传至少一个文件!");
    return;
  }

}

</script>

<style lang="scss" scoped>

</style>